<meta http-equiv="Content-type" content="text/html" charset="UTF-8">
<head>
    <meta charset="utf-8">
    <title>卖家后端管理系统</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/sell/static/css/style.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/sell/static/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/sell/static/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" href="/sell/static/css/bootstrap-datetimepicker.min.css">
    <title>根据订单状态查询的订单列表</title>
<#--   <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>-->
<#--  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<#--    <#include "../../common/header.ftl">-->
</head>
<body>
<div class="content-wrapper" style="display: flex">
    <div class="nav-wrapper" style="flex: 0 0 200px;width: 200px">
            <#include "../../common/nav.ftl">
    </div>
    <div id="page-content-wrapper" style="flex: 1;margin-left: 20px;margin-top: 100px">
        <div class="col-md-12 column">
            请选择订单分类:
            <select id="selectStatus">
                <option selected value="/sell/order/admin/findorderbetween?openid=${openid}&byStatusType=3">
                    待评论订单
                </option>
                <option value="/sell/order/admin/findorderbetween?&openid=${openid}&byStatusType=1">
                    已完成订单
                </option>
                <option value="/sell/order/admin/findorderbetween?&openid=${openid}&byStatusType=2">
                    已取消订单
                </option>
            </select>
            开始时间:<input type="date" id="startDate" value="2018-01-01"/>
            结束时间:<input type="date" id="endDate" value="9018-01-01"/>

            <input type="button" value="查询" onclick="selectList()"/>
            <table class="table" table-bordered style="margin-top: 20px">
                <thead>
                <tr>
                    <th>
                        订单id
                    </th>
                    <th>
                        订单总价
                    </th>
                    <th>
                        订单状态
                    </th>
                    <th>
                        地址
                    </th>
                    <th>
                        创建时间
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>
                    <#list pages.getContent() as pageItem>
                    <tr class="success">
                        <td>
                            ${pageItem.orderId}
                        </td>
                        <td>
                            ${pageItem.orderAmount}
                        </td>
                        <td>
                        <#if pageItem.orderStatus == 0 >
                            待支付
                        <#elseif pageItem.orderStatus == 1 >
                            已完成
                        <#elseif pageItem.orderStatus == 2 >
                            已取消
                        <#elseif pageItem.orderStatus == 3 >
                            待评价
                        </#if>

                        </td>
                        <td>
                            ${pageItem.buyerAdderss}
                        </td>
                        <td>
                            ${pageItem.createTime}
                        </td>
                        <td>
                            <input type="button" value="查看订单详情" onclick="selectDetail('${pageItem.orderId}')"/>
                        </td>
                    </tr>
                    </#list>
                </tbody>
            </table>
            <ul class="pagination pull-right">
                <!--显示上一页-->
                <#if currentPage lt 2>
                    <li class="disabled"><a href="#">上一页</a></li>
                <#else>
                     <li>
                         <a href="/sell/order/admin/findorderbetween?currentPage=${currentPage - 1}&size=${size}&byStatusType=${byStatusType}&openid=${openid}">上一页</a>
                     </li>
                </#if>

                <!--显示当前页-->
                <#list 1..pages.getTotalPages() as index>
                    <#if index == 0>
                    <#elseif currentPage == index>
                        <li class="disabled"><a href="#">${index}</a></li>
                    <#else>
                        <li>
                            <a href="/sell/order/admin/findorderbetween?currentPage=${index}&size=${size}&byStatusType=${byStatusType}&openid=${openid}">${index}</a>
                        </li>
                    </#if>
                </#list>

                <!--显示下一页-->
                     <#if currentPage gte pages.getTotalPages()>
                        <li class="disabled"><a href="#">下一页</a></li>
                     <#else>
                        <li>
                            <a href="/sell/order/admin/findorderbetween?currentPage=${currentPage + 1}&size=${size}&byStatusType=${byStatusType}&openid=${openid}">下一页</a>
                        </li>
                     </#if>
            </ul>
        </div>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        订单提示
                    </h4>
                </div>
                <div class="modal-body">
                    您有一条新的订单，请查看
                </div>
                <div class="modal-footer">
                    <button onclick="document.getElementById('notice').pause()" type="button"
                            class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button onclick="location.reload()" type="button" class="btn btn-primary">查看新的订单</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>

</div>
<#--播放音乐-->
<audio id="notice">
    <source src="/sell/static/mp3/ordersong.mp3" type="audio/mpeg"/>
</audio>
<script>
    selectList = function () {
        <!--获取多选框选择项-->
        var select = document.getElementById("selectStatus");
        <!--获取当前被选中的节点-->
        var index = select.selectedIndex;
        var options = select.options;
        var selectValue = options[index].value;

        <!--获取时间-->
        var startDate = document.getElementById("startDate").value;
        var endDate = document.getElementById("endDate").value;
        var s = new Date(startDate);
        var e = new Date(endDate);
        if (s.getTime() > e.getTime()) {
            alert("请输入正确的起始日期，开始日期必须小于等于结束日期");
        } else {
            this.location.href = selectValue + "&startDate=" + startDate + "&endDate=" + endDate;
        }
    };

    function selectDetail(orderId) {
        var openid = "${openid}";
        this.location.href = "/sell/order/admin/detaillist?openid=" + openid + "&orderId=" + orderId;
    }
</script>

<script>
    console.log('test');
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://bread.s1.natapp.cc/sell/webSocket')
    } else {
        alert('该浏览器不支持!');
    }

    websocket.onopen = function (event) {
        console.log('建立连接');
    };

    websocket.onclose = function (event) {
        console.log('关闭连接');
    };

    websocket.onmessage = function (event) {
        console.log('收到消息:' + event.data);
        //弹窗提醒,播放音乐
        document.getElementById('notice').play();
        $('#myModal').modal('show');

    };

    websocket.onerror = function (event) {
        alert('websocked通信发生错误');
    };

    window.onbeforeunload = function (event) {
        websocket.close();
    }

</script>
</body>

